<template>
  <div>
    <div style="width: 100%; height: 10%;">
      <el-tabs v-model="activeName" style="width: 100%; height: 100%" @tab-click="handleClick">
        <el-tab-pane label="综合排序" name="first">
          <el-tag v-for="big in bigzone" @click="pitchQuery(big.bigzone_name)" type="success">
            <el-link type="primary" style="margin-left: 20px">{{ big.bigzone_name }} | {{ big.count }}</el-link>
          </el-tag>
        </el-tab-pane>
        <el-tab-pane label="最多点击" name="second">
          <el-tag v-for="big in bigzone" @click="pitchQuery1(big.bigzone_name)" type="success">
            <el-link type="primary" style="margin-left: 20px">{{ big.bigzone_name }} | {{ big.count }}</el-link>
          </el-tag>
        </el-tab-pane>
        <el-tab-pane label="最多收藏" name="third">
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="historyList==''" style="text-align: center">
      <img src="../../assets/img/nodata.png">
    </div>
    <div v-if="historyList!=''">
      <el-row>
        <div
            style="height: 150px;padding: 0px 0px;display: inline-block;width: 20%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);text-align: center"
            v-for="his in historyList">
          <el-image style="width: 150px;height: 100px;display: inline-block;border-radius: 5%;"
                    @click="jumpPath(his.video_id)"
                    :src="his.video_cover"></el-image>
          <div style="display: inline-block;width: 80%;color: #4d4d4d">
             <span class="jumptitle" style="float: left" @click="jumpPath(his.video_id)">
                  {{ his.video_title.substring(0, 7) + "..." }}
             </span><br>

            <span icon="logo-youtube" style="float: left">
               <icon type="logo-youtube"/>{{ his.video_isreprint }}
            </span>
            <span>
              <Icon type="md-time"/>{{ his.video_createTime.toString().substring(0, 10) }}
            </span>
            <Tooltip content="取消收藏" placement="bottom">
                  <Icon  @click="videoDelById(his.video_id);" style="cursor:pointer" v-if="flag" type="ios-star" />
            </Tooltip>
            <Tooltip content="删除视频" placement="bottom">
              <Icon  @click="videoDelByVideoId(his.video_id);" style="cursor:pointer" v-if="flag1" type="ios-trash" />
            </Tooltip>
          </div>
        </div>
      </el-row>
      <el-row>
        <el-pagination
            style="float: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout=" sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-row>
    </div>

  </div>


</template>

<script>
import {
  BigzoneByUserCount,
  CollectvideoUserById, OffCollectVideo,
  PlayCounts,
  QueryUserId,
  SynthesizeQuery,
  SynthesizeQueryDesc,
  VideoDelByVideoId
} from "../../api/video/video";

export default {
  name: "spacevideo",
  data() {
    return {
      num: '1',
      bigzone: [],
      z: '',
      historyList: [],
      currentPage: 1,
      total: 10, // 总条目数
      pages: 5,  // 总页数
      pageNum: 1, // 当前的页码
      pageSizes: [5, 10, 15, 20, 30, 40, 50], // select选项设置：条/页
      pageSize: 15, // 每页显示条目个数
      activeName: 'first',
      bagname: '',
      flag:false,
      flag1:true,
      pp:{},
    }
  },
  mounted() {
    this.playCounts();
    this.queryUserId();
  },
  created() {
    //this.handleClick()
    this.bigzoneByUserCount();
    //  this.queryUserId();
    console.log(this.pp);
  },
  methods: {
    /**
     * 删除视频
     * @param val 视频id
     */
    videoDelByVideoId(val){
      console.log(val);
      this.$confirm('确认要删除该视频吗！, 是否继续?', '删除操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        VideoDelByVideoId(val).then(result=>{
            if (result.data!=0){
              //this.$Message.success({'删除成功'});
              this.$message.success({
                center:true,
                closable:true,
                content:'删除成功',
                top:250,
                duration:1.0
              })
              this.queryUserId();
            }else{
               // this.$Message.error('删除失败！请重新操作');
                this.$Message.error({
                  center:true,
                  content:'删除失败！请重新操作',
                  top:250,
                  duration:1.0
                });
            }
          });
      }).catch(() => {
        this.$Message.warning('已删除成功');
      });
    },

    /**
     * 请求查询所有视频接口
     */
    queryUserId() {
      var user = JSON.parse(sessionStorage.getItem('user'));
      var userId = user.userId;
      QueryUserId(userId, this.pageNum, this.pageSize).then(result => {
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.historyList = result.data.list;
      })
    },
    /**
     * 用户视频发布总量
     */
    playCounts() {
      var user = JSON.parse(sessionStorage.getItem('user'));
      var userId = user.userId;
      PlayCounts(userId).then(result => {
        this.num = result.data;
      })
    },
    /**
     * 请求查询用户某个类型的视频数量
     */
    bigzoneByUserCount() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      BigzoneByUserCount(userId).then(result => {
        this.bigzone = result.data;
      })
    },
    videoDelById(videoId){
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      this.$confirm('确认要取消收藏该视频吗！, 是否继续?', '取消收藏操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        if (user!=null){
          OffCollectVideo(userId,videoId).then(result=>{
            if (result.data!=0){
              this.$Message.success('取消收藏成功');
              this.synthesizeQueryDesc();
            }else{
              this.$Message.error('取消收藏失败！请重新操作');
            }
          })
        }

      }).catch(() => {
        this.$Message.warning('已放弃不收藏');
      });

    },
    /**
     * 页签跳动
     * @param tab
     * @param event
     */
    handleClick(tab, event) {
      this.pp=tab.index;
      var th = this;
      if (tab.index == 0) {
        this.queryUserId();
        th.flag=false;
        th.flag1=true;
      } else if (tab.index == 1) {
        th.synthesizeQueryDesc();
        th.flag=false;
        th.flag1=false;
      } else if (tab.index == 2) {
        th.collectvideoUserById();
        th.flag=true;
        th.flag1=false;
      } else {
        this.historyList = '';
      }
    },
    /**
     * 请求根据点击量排序
     */
    synthesizeQueryDesc() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      SynthesizeQueryDesc(userId, null, this.pageNum, this.pageSize).then(result => {
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.historyList = result.data.list;
      });
    },
    /**
     * 请求查询收藏视频接口
     */
    collectvideoUserById() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      CollectvideoUserById(userId, this.pageNum, this.pageSize).then(result => {
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.historyList = result.data.list;
      })
    },
    /**
     * 点击类型事件
     * @param val
     */
    pitchQuery1(val) {
      console.log(val);
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      if (this.activeName === 'second') {
        if (val != null && val != '') {
          SynthesizeQueryDesc(userId, val, this.pageNum, this.pageSize).then(result => {
            console.log(result.data);
            this.total = result.data.total;
            this.pages = result.data.pages;
            this.pageNum = result.data.pageNum;
            this.pageSize = result.data.pageSize;
            this.historyList = result.data.list;
          })
        } else {
          this.historyList = '';
        }
      } else {
        this.historyList = '';
      }
    },
    pitchQuery(val) {
      this.bagname = val;
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      if (this.activeName === 'first') {
        if (val != null && val != '') {
          SynthesizeQuery(userId, val, this.pageNum, this.pageSize).then(result => {
            this.total = result.data.total;
            this.pages = result.data.pages;
            this.pageNum = result.data.pageNum;
            this.pageSize = result.data.pageSize;
            this.historyList = result.data.list;
          });
        } else {
          this.historyList = '';
          console.log(this.$message.error("没有数据"))
        }
      } else {
        this.historyList = '';
      }
    },
    /**
     * 分页方法
     * @param val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.queryUserId();
    },
    /**
     * 分页方法
     * @param val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryUserId()
    },
    // 点击跳转路径
    jumpPath(keyword) {
      // this.$router.push(`/search?keyword=${keyword}`);
      let newUrl = this.$router.resolve({
        path: `/Vedios?id=${keyword}`
      });
      window.open(newUrl.href, "_blank");
    }
  }
}
</script>

<style scoped>
.top,.bottom{
  text-align: center;
}
.center{
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
}
.center-left{
  float: left;
}
.center-right{
  float: right;
}
</style>
